<template>
    <div class="page-height" ref="height1">
        <!-- 搜索部分-->
        <div class="search-view">
            <el-form :inline="true" class="demo-form-inline" label-width="100px" size="small">
                <el-form-item label="广告ID">
                    <el-input v-model="query.trademarknum_01" placeholder="请输入站点ID"></el-input>
                </el-form-item>
                <el-form-item label="广告名称">
                    <el-input v-model="query.trademarknum_02" placeholder="请输入广告名称"></el-input>
                </el-form-item>
                <el-form-item label="广告评论">
                    <el-select v-model="query.trademarknum_03" placeholder="请选择">
                        <el-option label="启用" value="ON"></el-option>
                        <el-option label="不启用" value="OFF"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预算">
                    <interval @money="qujianchange" ref="qujian1"  sttype="trademarknum_04"></interval>
                </el-form-item>
                <el-form-item label="预算类型">
                    <el-select v-model="query.trademarknum_05" placeholder="请选择">
                        <el-option label="不限" value="BUDGET_MODE_INFINITE"></el-option>
                        <el-option label="日预算" value="BUDGET_MODE_DAY"></el-option>
                        <el-option label="总预算" value="BUDGET_MODE_TOTAL"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                    v-model="query.time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="" style="width:300px !important">
                    <el-button type="primary" @click="onSearch()">搜索</el-button>
                    <el-button @click="resetQuery()">重置</el-button>
                    <el-button @click="onRefresh()" icon="el-icon-refresh" circle></el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <div style="margin:0 20px"> 
        <el-table :max-height="maxheight" :key="key" :data="tableData" border size="mini" v-loading="loading" element-loading-text="加载中..." stripe
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column
            align="center"
            type="selection"
            width="55">
            </el-table-column> 
            <el-table-column prop="project_id" label="项目ID" align="center"></el-table-column>
            <el-table-column prop="promotion_name" label="广告名称" align="center"></el-table-column>
            <!-- <el-table-column prop="advertiser_id" label="广告账户ID" align="center"></el-table-column> -->
            <el-table-column prop="is_comment_disable" label="广告评论" align="center">
                <template  slot-scope="scope">
                    <el-button type="primary" v-if="scope.row.is_comment_disable =='ON'" size="mini">启用</el-button>
                    <el-button type="danger" v-if="scope.row.is_comment_disable =='OFF'" size="mini">不启用</el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="materials_type" label="素材类型" align="center">
                <template  slot-scope="scope">
                    {{scope.row.materials_type?scope.row.materials_type:'--'}}
                </template>
            </el-table-column> -->
            <el-table-column prop="budget" label="预算(元)" align="center"></el-table-column>
            <el-table-column prop="budget_mode" label="预算类型" align="center">
                <template  slot-scope="scope">
                    <el-button v-if="scope.row.budget_mode =='BUDGET_MODE_INFINITE'" size="mini">不限</el-button>
                    <el-button type="primary" v-if="scope.row.budget_mode =='BUDGET_MODE_DAY'" size="mini">日预算</el-button>
                    <el-button type="success" v-if="scope.row.budget_mode =='BUDGET_MODE_TOTAL'" size="mini">总预算</el-button>
                </template>
            </el-table-column>
             
            <el-table-column prop="status" label="广告状态" align="center">
                <template  slot-scope="scope">
                    <el-button v-if="scope.row.status =='NOT_DELETED'||scope.row.status =='ALL'" size="mini">不限</el-button>
                    <el-button v-if="scope.row.status =='OK'" size="mini">投放中</el-button>
                    <el-button v-if="scope.row.status =='DELETED'" size="mini">已删除</el-button>
                    <el-button v-if="scope.row.status =='PROJECT_OFFLINE_BUDGET'" size="mini">项目超出预算</el-button>
                    <el-button v-if="scope.row.status =='PROJECT_PREOFFLINE_BUDGET'" size="mini">项目接近预算</el-button>
                    <el-button v-if="scope.row.status =='TIME_NO_REACH'" size="mini">未到达投放时间</el-button>
                    <el-button v-if="scope.row.status =='TIME_DONE'" size="mini">已完成</el-button>
                    <el-button v-if="scope.row.status =='NO_SCHEDULE'" size="mini">不在投放时段</el-button>
                    <el-button v-if="scope.row.status =='AUDIT'" size="mini">新建审核中</el-button>
                    <el-button v-if="scope.row.status =='REAUDIT'" size="mini">修改审核中</el-button>
                    <el-button type="danger" v-if="scope.row.status =='FROZEN'" size="mini">已终止</el-button>
                    <el-button v-if="scope.row.status =='AUDIT_DENY'" size="mini">审核不通过</el-button>
                    <el-button v-if="scope.row.status =='OFFLINE_BUDGET'" size="mini">广告超出预算</el-button>
                    <el-button v-if="scope.row.status =='OFFLINE_BALANCE'" size="mini">账户余额不足</el-button>
                    <el-button v-if="scope.row.status =='PREOFFLINE_BUDGET'" size="mini">广告接近预算</el-button>
                    <el-button type="info" v-if="scope.row.status =='DISABLED'" size="mini">已暂停</el-button>
                    <el-button type="info" v-if="scope.row.status =='PROJECT_DISABLED'" size="mini">已被项目暂停</el-button>
                    <el-button v-if="scope.row.status =='LIVE_ROOM_OFF'" size="mini">关联直播间不可投</el-button>
                    <el-button v-if="scope.row.status =='PRODUCT_OFFLINE'" size="mini">关联商品不可投</el-button>
                    <el-button v-if="scope.row.status =='AWEME_ACCOUNT_DISABLED'" size="mini">关联抖音账号不可投</el-button>
                    <el-button v-if="scope.row.status =='AWEME_ANCHOR_DISABLED'" size="mini">锚点不可投</el-button>
                    <el-button type="info" v-if="scope.row.status =='DISABLE_BY_QUOTA'" size="mini">已暂停</el-button>
                    <el-button v-if="scope.row.status =='CREATE'" size="mini">新建</el-button>
                    <el-button v-if="scope.row.status =='ADVERTISER_OFFLINE_BUDGET'" size="mini">账号超出预算</el-button>
                    <el-button v-if="scope.row.status =='ADVERTISER_PREOFFLINE_BUDGET'" size="mini">账号接近预算</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="promotion_create_time" label="广告创建时间" align="center"></el-table-column>
            <el-table-column
                align="center"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="$refs.detailref.open(scope.row)" type="text" size="small">详情</el-button>
                </template>
                </el-table-column>
        </el-table>
    </div>
        <div class="pagination-view">
            <el-pagination background layout="sizes, prev, pager, next" :current-page="page" :total="total"
                :page-sizes="[10, 20, 50, 100]" :page-size="page_size" @current-change="getData"
                @size-change="handleSizeChange"  />
        </div>
        <detail_page ref="detailref"></detail_page>
    </div>
</template>

<script>
import detail_page from './common/detail.vue'
export default {
    name: 'flowing',
    components: { detail_page },
    data() {
        return {
            key:0,
            maxheight:0,
            loading:false,
            query: {
                trademarknum_01: '',
                trademarknum_02: '',
                trademarknum_03: '',
                trademarknum_04: '',
                trademarknum_05: '',
              
                time:''
            },
            tableData: [],
            total: 0,
            page: 1,
            page_size: 10,
        }
    },
    created() {
       
        this.getData(1)
    },
    watch: {
        getCurrent: function () {
            this.getData(1)
        }
    },
    mounted(){
        let height1 = this.$refs.height1.clientHeight;
        this.maxheight = height1 - 75
        this.key++
    },
    methods: {

        qujianchange(e){
            this.query[e.sttype] = e.money
        },


        handleSelectionChange(){

        },
        // 搜索
        onSearch(e) {
            this.getData(1)
        },
        //重置搜索
        resetQuery() {
           this.query={
            trademarknum_01: '',
                trademarknum_02: '',
                trademarknum_03: '',
                trademarknum_04: '',
                trademarknum_05: '',
                time:''
            },
            this.$refs.qujian1.rechar()
            this.getData(1)
        },

        // 刷新
        onRefresh() {
            this.getData()
        },
        //page_size发生变化
        handleSizeChange(e) {
            this.page_size = e
            this.getData(1)
        },
        getData(page = null) {

            if (page) this.page = page
            var query = this.query
            query['page'] = this.page
            query['pageSize'] = this.page_size
            this.loading = true
            this.$api.post('/api/demo/advertisement', query).then((res) => {
                const list = res.data.list || []
                this.tableData = list
                this.total = res.data.total
                this.loading = false
            }).catch((err) => {
                this.apiErr(err)
            }).finally(() => {
                this.loading = false
                this.loadingHide()
            })
        },
    }
}
</script>

<style lang="scss" scoped>


.search-view {
    padding: 20px 20px 0;
    margin-bottom:20px;
    .el-form-item {
        width: 260px;
        margin-bottom: 10px;

        .input {
            width: 150px;
        }
    }
}

.btn-group {
    margin-bottom: 10px;

    .el-button {
        margin-left: 0;
        margin-right: 10px;
        margin-top: 10px;
    }
}

.color_bule {
    color: #4490e7;
    cursor: pointer;
}

.item-text {
    padding: 0 8px;
}
</style>
